<!-- 编辑弹窗 -->
<template>
    <ele-modal
      width="840px"
      :visible="visible"
      :close-on-click-modal="true"
      custom-class="ele-dialog-form"
      :title="'添加规格'"
    >
    <el-form ref="form" :model="form" :rules="rules" label-width="100px" >
        <el-card  style="margin-top: -10px">
            <el-row :gutter="20">
                <el-col :md="24" :sm="24">
                    <el-form-item label="产品名称:">{{showData.name}}({{showData.code}})
                    
                    </el-form-item>
                  </el-col>
               
              </el-row>
          <el-row :gutter="15">
            <el-col  :sm="12" :md="24" >
              <el-form-item label="产品规格:"  prop="itemName">
                <el-input v-model="form.itemName" placeholder="请输入产品规格"   />
              </el-form-item>
                
           
             
            </el-col>
           
          </el-row>
          <el-row :gutter="15">
          
         
            <el-col :md="12" :sm="24">
                <el-form-item label="库存:" prop="stockQty">
                  <el-input v-model="form.stockQty" placeholder="请输入库存" @keyup.native="form.stockQty = form.stockQty.replace(/[^\d.]/g,'');
                  form.stockQty = form.stockQty.replace(/\.{2,}/g,'.');
                  form.stockQty = form.stockQty.replace(/^\./g,'');
                  form.stockQty = form.stockQty.replace('.','$#$').replace(/\./g,'').replace('$#$','.');
                  form.stockQty = form.stockQty.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');" />
                </el-form-item>
              </el-col>
              <el-col :md="12" :sm="24">
                <el-form-item label="单位:" prop="unitId">
                    <el-select v-model="form.unitId"  placeholder="单位"   class="ele-block" clearable>
                        <el-option v-for="(item, index) in units" :key="index" :label="item.name" :value="item.id"/>
                    </el-select>
                </el-form-item>
              </el-col>
              
          </el-row>
          <el-row :gutter="15">
          
            <el-col :md="12" :sm="24">
              <el-form-item label="销售价:" prop="price">
                <el-input v-model="form.price" placeholder="请输入销售价" @keyup.native="form.price = form.price.replace(/[^\d.]/g,'');
                form.price = form.price.replace(/\.{2,}/g,'.');
                form.price = form.price.replace(/^\./g,'');
                form.price = form.price.replace('.','$#$').replace(/\./g,'').replace('$#$','.');
                form.price = form.price.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');" />
              </el-form-item>
            </el-col>
            <el-col :md="12" :sm="24">
                <el-form-item label="成本价:" prop="costPrice">
                  <el-input v-model="form.costPrice" placeholder="请输入成本价"  @keyup.native="form.costPrice = form.costPrice.replace(/[^\d.]/g,'');
                  form.costPrice = form.costPrice.replace(/\.{2,}/g,'.');
                  form.costPrice = form.costPrice.replace(/^\./g,'');
                  form.costPrice = form.costPrice.replace('.','$#$').replace(/\./g,'').replace('$#$','.');
                  form.costPrice = form.costPrice.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');"  />
                </el-form-item>
              </el-col>
             
          </el-row>
          
          <el-row :gutter="15">
          
          <el-col :md="12" :sm="24">
            <el-form-item label="门市价:" prop="shopPrice">
              <el-input v-model="form.shopPrice" placeholder="请输入门市价" @keyup.native="form.shopPrice = form.shopPrice.replace(/[^\d.]/g,'');
              form.shopPrice = form.shopPrice.replace(/\.{2,}/g,'.');
              form.shopPrice = form.shopPrice.replace(/^\./g,'');
              form.shopPrice = form.shopPrice.replace('.','$#$').replace(/\./g,'').replace('$#$','.');
              form.shopPrice = form.shopPrice.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');" />
            </el-form-item>
          </el-col>
          <el-col :md="12" :sm="24">
            <el-form-item label="虚拟已售:" prop="virtualSaleQty">
              <el-input v-model="form.virtualSaleQty" placeholder="请输入虚拟已售" @keyup.native="form.virtualSaleQty = form.virtualSaleQty.replace(/[^\d.]/g,'');
              form.virtualSaleQty = form.virtualSaleQty.replace(/\.{2,}/g,'.');
              form.virtualSaleQty = form.virtualSaleQty.replace(/^\./g,'');
              form.virtualSaleQty = form.virtualSaleQty.replace('.','$#$').replace(/\./g,'').replace('$#$','.');
              form.virtualSaleQty = form.virtualSaleQty.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');" />
              
            </el-form-item>
          </el-col>
          <el-col  :sm="12" :md="24"  >
            <el-form-item label="产品图片:" >
              <el-upload action="#" ref="upload" list-type="picture-card"   :auto-upload="false" :file-list="fileList"   :class="{hide:hideUpload}" :disabled="fileList.length>=limit" :on-change="handleChange" limit="1">
                  <i slot="default" class="el-icon-plus"></i>
                  <div slot="file" slot-scope="{file}" style="width:100%;height:100%">
                    <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" >
                    <span class="el-upload-list__item-actions">
                      <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)" >
                        <i class="el-icon-zoom-in"></i>
                      </span>
                      <span v-if="!removeDisable" class="el-upload-list__item-delete" @click="handleRemove(file)" >
                        <i class="el-icon-delete"></i>
                      </span>
                    </span>
                  </div>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible" style="z-index:9999">
                  <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
            </el-form-item>
          </el-col>
        </el-row>
    
        </el-card>
    </el-form>
    <div slot="footer">
      <el-button @click="updateVisible(false)">取消</el-button>
      <el-button type="primary" :loading="loading" @click="save">
        保存
      </el-button>
    </div>
    </ele-modal>
  </template>
  
  <script>
    //初始化对像
    import upload from "@/components/UpLoad/index.js";
    import { QueryAttchmentByExtendId ,GetGuid }  from '@/api/attchment';
    import { QueryAllChildDictViewByCode } from '@/api/systemmanager/dictionarymanager';
    import { QueryBProductViewById,AddProductItem} from '@/api/productmanager/productitemmanager';
    export default {
      name: 'ProductItemsAdd',
      props: {
        // 弹窗是否打开
        visible: Boolean,
        // 修改回显的数据
        data: Object,
        
      },
      mixins: [upload],
      data() {
        return {
          // 表单数据
          form: {},
          showData:{},
          // 表单验证规则
          rules: {
            itemName: [{required: true,message: '请输入产品规格',trigger: 'blur'}],
            stockQty: [{required: true,message: '请输入库存',trigger: 'blur'}],
            unitId: [{required: true,message: '请选择单位',trigger: 'blur'}],
            price: [{required: true,message: '请输入销售价',trigger: 'blur'}],
            costPrice: [{required: true,message: '请输入成本价',trigger: 'blur'}],
            shopPrice: [{required: true,message: '请输入门市价',trigger: 'blur'}],
            virtualSaleQty: [{required: true,message: '请输入虚拟销量',trigger: 'blur'}]
          },
          // 提交状态
          loading: false,
          // 是否是修改
          isUpdate: false,
          //性别
          isSysList:[],
          statusList:[],
          units:[],
          treeData:[]
        };
      },
      created(){
        this.queryAllChildDictViewByCodes();
      },
      methods: {
        async getId(){
            let id = await GetGuid();
            this.form.id=id;
        },
        async queryAllChildDictViewByCodes(){
            let unitsData = await  QueryAllChildDictViewByCode(this.Constant.C_DW);
            this.units = [];
            this.units = unitsData;
        },
        /* 保存编辑 */
        save() {
          //校验必填信息
          this.$refs['form'].validate((valid) => {
            if (!valid) {return false;}
            //日期时间
            this.loading = true;

            //上传图片
            this.fileList.map((f) => {
            if (f.file != undefined) {
              f.fileType = 1;
              f.imgType = 4;
              console.log(f);
              this.uploadImg(f);
            }
          });
  
            const saveOrUpdate =  AddProductItem;
            console.log(this.form);
            saveOrUpdate(this.form)
              .then((msg) => {
                this.loading = false;
                this.$message.success(msg);
                this.updateVisible(false);
  
                //回调父组件方法
                this.$emit('done');
                this.fileList = [];
              })
              .catch((e) => {
                this.loading = false;
                this.$message.error(e.message);
              });
          });
        },
       
        /* 更新visible */
        updateVisible(value) {
          //更新父组件中的visible的值
          this.$emit('update:visible', value);
          //更新文件列表对像
          this.fileList= [];
        },
  
       
        //上传图片
        handleChange(file, fileList) {
          this.hideUpload = fileList.length >= this.limit;
          let obj = {
            orderIndex: 1, //默认值
            attType: 1, //文件类型(1:图片,2:文件)
            file: file.raw, // 文件流
            fileName: file.name, // 文件名称
            url:file.url,// 文件路径
          }
          //索引
          if(fileList!=null && fileList.length>0){
            obj.orderIndex = fileList.length;
          }
          //业务id 新增页面时，从后台获取Guid
          if(this.form){
            obj.businessId = this.showData.id; 
            obj.extendId=this.form.id;
          }
          //文件列表
          this.fileList.push(obj);
           //设置上传图片按钮是否可见
           if(this.fileList!=null && this.fileList!=undefined){
                this.hideUpload = this.fileList.length >= this.limit;
              }else{
                this.hideUpload =false;
              }
        },
  
      },
  
     
      /* 监听visible属性变化 */
      watch: {
        visible(visible) {
          if (visible) {
              this.showData=this.data;
              this.form={}
              this.getId();
              this.form.productId=this.data.id;
              this.isUpdate = false;
            
          } else {
             //设置上传图片按钮是否可见
             if(this.fileList!=null && this.fileList!=undefined){
                this.hideUpload = this.fileList.length >= this.limit;
              }else{
                this.hideUpload =false;
              }
            //移除校验结果
            this.$refs['form'].clearValidate();
            this.form = {};
          }
        }
      }
    };
  </script>
  